<template>
	<view>
		<view class="shop_top">
			<view class="shop_top_left">
				<u-icon name="map-fill" size="24" style="margin-right: 4rpx;"></u-icon>
				当前城市：{{ city }}
				<text style="color: #000000;" @click="changeCity">【切换】</text>
			</view>
			<view class="shop_top_right">
				共有<text style="color: #FE020E;">{{ shopList.length }}</text>个授权门店
			</view>
		</view>
		<view class="shop_search">
			<u-search style="width: 100%;height: 72rpx;" placeholder="搜索关键词" v-model="params.title" bgColor="#F7F8FA" 
			searchIconColor="#020202" searchIconSize="25" placeholderColor="#C8C9CC" :showAction="false">
			</u-search>
			<button @click="searchShop" class="search_button">搜索</button>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="shop_item" v-for="(item,index) in shopList" :key="index">
				<view class="item_left">
					<img :src="item.logo" :alt="item.title" />
					<view class="item_content">
						<text style="font-weight: bold;font-size: 28rpx;color: #000000;">
							{{item.title}}
						</text>
						<view>
							<u-icon name="phone-fill" color="#DCDCDC" size="24" style="color:#DCDCDC;margin-right: 12rpx;"></u-icon>
							<text>{{item.phone}}</text>
						</view>
						<view style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" @click="openLocation(item)">
							<u-icon name="map-fill" color="#DCDCDC" size="24" style="color:#DCDCDC;margin-right: 12rpx;"></u-icon>
							<text>{{item.address}}</text>
						</view>
					</view>
				</view>
				<view class="item_right">
					<view @click="cell(item.phone)">
						<view>
							<u-icon name="phone" color="#000000" size="26" style="color:#000000;"></u-icon>
						</view>
					</view>
					<text>{{item.distance}}Km</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:"广州市",
				shopList:[],
				backup:[],
				params: {
					title: "", // 搜索关键字
					latitude:0,
					longitude:0,
				},
			}
		},
		async onLoad() {
			let that = this;
			uni.showLoading({title:'加载中···'});
			// 获取坐标
			await uni.getLocation({type: 'wgs84',
				success(res) {
				    that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.getShopList();
				},
				complete() {
					uni.hideLoading();
				}
			});
		},
		methods: {
			// loadCity(log, lat){
				
			// },
			// 拨打电话
			cell(phone){
				if(phone) uni.makePhoneCall({phoneNumber:phone});
				else uni.showToast({title:"暂无联系方式！",icon:"error"})
			},
			
			// 导航
			openLocation(item){
				const { latitude, longitude } = item;
				if(latitude&&longitude)
				uni.openLocation({
					latitude:parseFloat(latitude),
					longitude:parseFloat(longitude),
					scale: 18,
					success: (res)=>{},
					fail: (res)=>{
						console.log(res);
					}
				})
			},
			
			// 查询网点信息
			searchShop(){
				try{
					uni.showLoading({title:'加载中···'});
					this.shopList = this.backup.filter((item) => {
						return item.title.includes(this.params.title);
					});
				}catch(e){
					uni.showToast({title:"搜索失败！",icon:"error"})
				}finally{uni.hideLoading();}
				
			},
			
			async getShopList(){
				try{
					uni.showLoading({title:'加载中···'});
					let res =  await this.$api.getListByDistance(this.params);
					if(!res.success) return;
					this.shopList = res.result;
					this.backup = res.result;
				}catch(e){
				}finally{uni.hideLoading();}
			},
			
			changeCity(){
				let that = this;
				uni.chooseLocation({
					success: function (res) {
						that.params.latitude = res.latitude;
						that.params.longitude = res.longitude;
						that.city = res.address.substring(0,6)+'...';
						that.getShopList();
					}
				});
			},
		}
	}
</script>

<style>
	page{
		background: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
.shop_top{
	height: 90rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
	background-color: #FFFFFF;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #DCDCDC;
	.shop_top_left{
		font-weight: normal;
	}
	.shop_top_right{
		color: #000000;
	}
}
.shop_search{
	height: 104rpx;
	width: 100%;
	display: flex;
	align-items: center;
	background-color:  #FFFFFF;
	margin-top: 2rpx;
	padding: 20rpx 32rpx 12rpx 32rpx;
	margin-bottom: 10rpx;
	.search_button{
		position: absolute;
		z-index: 900;
		right: 32rpx;
		height: 64rpx;
		width: 112rpx;
		border-radius: 1290rpx 1290rpx 1290rpx 1290rpx;
		background: #000000;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FBD62B;
		white-space: nowrap;
		&:active{
			color: #877216;
		}
	}
}
.scroll-Y {
	height: calc(100vh - 200rpx);
	padding-bottom: 16rpx;
	.shop_item{
		margin-top: 16rpx;
		height: 192rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		.item_left{
			display: flex;
			img{
				width: 128rpx;
				height: 128rpx;
				border-radius: 80%;
				margin-right: 12rpx;
			}
			.item_content{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				margin-bottom: 8rpx;
				max-width: 400rpx;
				color: rgba(0,0,0,0.65);
				line-height: 32rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.item_right{
			display: flex;
			flex-direction: column;
			justify-content: end;
			align-items: center;
			max-width: 100rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #707070;
			text{
				margin-top: 12rpx;
			}
			view{
				flex: 1;
				display: flex;
				align-items: flex-end;
				view{
					width: 64rpx;
					height: 64rpx;
					background: #FAE651;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 80%;
				}
			}
		}
	}
}
</style>
